<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>单向数据流</title>
	<script src="js/vue.js"></script>
</head>
<body>
	<div id="itany">
		<h2>父组件：{{name}}</h2>
		<input type="text" v-model="name">
		<h2>父组件：{{user.age}}</h2>

		<hr>

		<my-hello :name.sync="name" :user="user"></my-hello>
	</div>
	
	<template id="hello">
		<div>
			<h3>子组件：{{name}}</h3>
			<h3>子组件：{{user.age}}</h3>
			<button @click="change">修改数据</button>
		</div>
	</template>

	<script>
		var vm=new Vue({ //父组件
			el:'#itany',
			data:{
				name:'tom',
				user:{
					name:'zhangsan',
					age:24
				}
			},
			components:{
				'my-hello':{ //子组件
					template:'#hello',
					props:['name','user'],
					data(){
						return {
							username:this.name //方式1：将数据存入另一个变量中再操作
						}
					},
					methods:{
						change(){
							// this.username='alice';
							// this.name='alice';
							// this.$emit('update:name','alice'); //方式2：a.使用.sync，需要显式地触发一个更新事件
							this.user.age=18;
						}
					}
				}
			}
		});	
	</script>
</body>
</html>